<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
        }
        canvas {
            position: absolute;
            border: 1px solid #000;
        }
       .cls-1 {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            transition: stroke-dashoffset 1s linear;
        }

        /* 为每个path设置不同的延迟，确保按顺序执行 */
        #_1 {
            transition-delay: 0s;
        }
        #_2 {
            transition-delay: 1s;
        }
        #_3 {
            transition-delay: 2s;
        }
        #_4 {
            transition-delay: 3s;
        }
        #_5 {
            transition-delay: 4s;
        }
        #_6 {
            transition-delay: 5s;
        }
        #_7 {
            transition-delay: 6s;
        }
        #_8 {
            transition-delay: 7s;
        }
        #_9 {
            transition-delay: 8s;
        }
        #_10 {
            transition-delay: 9s;
        }
        #_11 {
            transition-delay: 10s;
        }
        #_12 {
            transition-delay: 11s;
        }
        #_13 {
            transition-delay: 12s;
        }
        #_14 {
            transition-delay: 13s;
        }
        #_15{
            transition-delay: 14s;
        }

    </style>
</head>
<body>
   <div class="box">
    <button id="startButton">开始动画</button>
    <canvas id="drawingCanvas" width="1407" height="798.031"></canvas>
    <svg id="路径" xmlns="http://www.w3.org/2000/svg" width="1407" height="798.031" viewBox="0 0 1407 798.031">
        <defs>
            <style>
                .cls-1 {
                    fill: none;
                    stroke: #d2ba90;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    stroke-width: 10px;
                    fill-rule: evenodd;
                }
                .cls-2 {
                    fill: none;
                    stroke: #ccc;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    stroke-width: 10px;
                    fill-rule: evenodd;
                }
            </style>
        </defs>
        <path id="_1" data-name="1" class="cls-2" d="M781,937s88.594-19.81,147-26c67.457-7.15,152-10,152-10" transform="translate(-536 -858.969)"/>
        <path id="_2" data-name="2" class="cls-2" d="M589,1127s143.672-27.59,230-51c98.268-26.65,265-40,265-40" transform="translate(-536 -858.969)"/>
        <path id="_3" data-name="3" class="cls-2" d="M956,1170s1.707,59.25-2,205c-4.965,195.25-13,277-13,277" transform="translate(-536 -858.969)"/>
        <path id="_4" data-name="4" class="cls-2" d="M853,1177s-34.1,94.3-141,161c-89.462,55.82-171,50-171,50" transform="translate(-536 -858.969)"/>
        <path id="_5" data-name="5" class="cls-2" d="M1055,1188s16.02-1.34,27,7c18.18,13.81,25,29,25,29" transform="translate(-536 -858.969)"/>
        <path id="_6" data-name="6" class="cls-2" d="M1521,864a44.759,44.759,0,0,1,13,11c6.01,7.448,9,21,9,21" transform="translate(-536 -858.969)"/>
        <path id="_7" data-name="7" class="cls-2" d="M1266,958s138.75-32.049,313-37c109.08-3.1,359,47,359,47" transform="translate(-536 -858.969)"/>
        <path id="_8" data-name="8" class="cls-2" d="M1406,1064s6.24,29.22,13,51c9.56,30.8,25,58,25,58" transform="translate(-536 -858.969)"/>
        <path id="_9" data-name="9" class="cls-2" d="M1441,1071s73.51-26.95,156-32c60.46-3.7,129.03,4.44,161,18,24,10.18-39,90-39,90" transform="translate(-536 -858.969)"/>
        <path id="_10" data-name="10" class="cls-2" d="M1471,1170s51.85-.2,107-2c67.11-2.19,118-7,118-7" transform="translate(-536 -858.969)"/>
        <path id="_11" data-name="11" class="cls-2" d="M1372,1258s13.7,97.4,27,149c17.45,67.68,36,123,36,123" transform="translate(-536 -858.969)"/>
        <path id="_12" data-name="12" class="cls-2" d="M1419,1284s95.51-9.98,178-15c77.06-4.69,170.57-4.29,210,14,23.65,10.97-28,223-28,223" transform="translate(-536 -858.969)"/>
        <path id="_13" data-name="13" class="cls-2" d="M1438,1402s76.85-7.2,132-9c67.11-2.19,135,3,135,3" transform="translate(-536 -858.969)"/>
        <path id="_14" data-name="14" class="cls-2" d="M1601,1292s0.14,32.69,1,100c0.65,50.59,0,108,0,108" transform="translate(-536 -858.969)"/>
        <path id="_15" data-name="15" class="cls-2" d="M1457,1532s80.85-1.2,136-3c67.11-2.19,164-9,164-9" transform="translate(-536 -858.969)"/>

        <path id="_1" data-name="1" class="cls-1" d="M781,937s88.594-19.81,147-26c67.457-7.15,152-10,152-10" transform="translate(-536 -858.969)"/>
        <path id="_2" data-name="2" class="cls-1" d="M589,1127s143.672-27.59,230-51c98.268-26.65,265-40,265-40" transform="translate(-536 -858.969)"/>
        <path id="_3" data-name="3" class="cls-1" d="M956,1170s1.707,59.25-2,205c-4.965,195.25-13,277-13,277" transform="translate(-536 -858.969)"/>
        <path id="_4" data-name="4" class="cls-1" d="M853,1177s-34.1,94.3-141,161c-89.462,55.82-171,50-171,50" transform="translate(-536 -858.969)"/>
        <path id="_5" data-name="5" class="cls-1" d="M1055,1188s16.02-1.34,27,7c18.18,13.81,25,29,25,29" transform="translate(-536 -858.969)"/>
        <path id="_6" data-name="6" class="cls-1" d="M1521,864a44.759,44.759,0,0,1,13,11c6.01,7.448,9,21,9,21" transform="translate(-536 -858.969)"/>
        <path id="_7" data-name="7" class="cls-1" d="M1266,958s138.75-32.049,313-37c109.08-3.1,359,47,359,47" transform="translate(-536 -858.969)"/>
        <path id="_8" data-name="8" class="cls-1" d="M1406,1064s6.24,29.22,13,51c9.56,30.8,25,58,25,58" transform="translate(-536 -858.969)"/>
        <path id="_9" data-name="9" class="cls-1" d="M1441,1071s73.51-26.95,156-32c60.46-3.7,129.03,4.44,161,18,24,10.18-39,90-39,90" transform="translate(-536 -858.969)"/>
        <path id="_10" data-name="10" class="cls-1" d="M1471,1170s51.85-.2,107-2c67.11-2.19,118-7,118-7" transform="translate(-536 -858.969)"/>
        <path id="_11" data-name="11" class="cls-1" d="M1372,1258s13.7,97.4,27,149c17.45,67.68,36,123,36,123" transform="translate(-536 -858.969)"/>
        <path id="_12" data-name="12" class="cls-1" d="M1419,1284s95.51-9.98,178-15c77.06-4.69,170.57-4.29,210,14,23.65,10.97-28,223-28,223" transform="translate(-536 -858.969)"/>
        <path id="_13" data-name="13" class="cls-1" d="M1438,1402s76.85-7.2,132-9c67.11-2.19,135,3,135,3" transform="translate(-536 -858.969)"/>
        <path id="_14" data-name="14" class="cls-1" d="M1601,1292s0.14,32.69,1,100c0.65,50.59,0,108,0,108" transform="translate(-536 -858.969)"/>
        <path id="_15" data-name="15" class="cls-1" d="M1457,1532s80.85-1.2,136-3c67.11-2.19,164-9,164-9" transform="translate(-536 -858.969)"/>
        

        
       
    </svg>
   </div>

    <script>
       document.getElementById('startButton').addEventListener('click', function() {
            // 首先重置路径的 stroke-dashoffset 到初始状态
            const paths = document.querySelectorAll('.cls-1');
            paths.forEach(path => {
                path.style.strokeDashoffset = '1000';  // 重置为初始的 stroke-dashoffset
                path.style.strokeDashoffset = '1000';  // 重置为初始的 stroke-dashoffset
            });

            // 小延时后启动动画
            setTimeout(() => {
                paths.forEach(path => {
                    path.style.strokeDashoffset = '0';  // 启动动画，显示路径
                });
            }, 50);  // 延时50ms确保样式重置生效
        });
        const canvas = document.getElementById('drawingCanvas');
    const ctx = canvas.getContext('2d');
    const startButton = document.getElementById('startButton');

    let drawing = false;
    let pathData = [];
    let currentPathIndex = 0;

    // 监听绘制事件
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseout', stopDrawing);

    // 记录路径
    function startDrawing(event) {
        drawing = true;
        const position = getCanvasPosition(event);
        pathData.push([position]);
    }

    function draw(event) {
        if (!drawing) return;
        const position = getCanvasPosition(event);
        const currentPath = pathData[pathData.length - 1];
        currentPath.push(position);
        ctx.lineTo(position.x, position.y);
        ctx.strokeStyle = 'deeppink';
        ctx.lineWidth = 10;
        ctx.stroke();
    }

    function stopDrawing() {
        if (!drawing) return;
        drawing = false;
        ctx.beginPath();
        clearCanvas()
    }
    function clearCanvas() {
    // 假设 ctx 是 CanvasRenderingContext2D 对象
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
    // 获取鼠标位置
    function getCanvasPosition(event) {
        const rect = canvas.getBoundingClientRect();
        return {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
    }

    // 按顺序执行动画
    function startAnimation() {
        // 初始时重置路径的stroke-dashoffset
        const paths = document.querySelectorAll('path');
        paths.forEach(path => {
            path.style.strokeDashoffset = '1000';
        });

        // 重置绘画状态
        ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清空画布
        pathData = [];  // 清除绘制路径

        // 监听每次绘制，画完一笔后执行动画
        currentPathIndex = 0;
        enableDrawingForNextPath();
    }

    function enableDrawingForNextPath() {
        // 只允许画当前路径对应的笔画，完成后才允许下一笔
        if (currentPathIndex >= document.querySelectorAll('.cls-1').length) {
            alert("所有路径已绘制完毕！");
            return;
        }

        const currentPath = document.querySelectorAll('.cls-1')[currentPathIndex];
        const pathDataPoints = pathData[currentPathIndex];

        // 清空画板并开始绘制当前路径
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawPath(currentPath, pathDataPoints);

        // 执行动画
        setTimeout(() => {
            currentPath.style.strokeDashoffset = '0';  // 执行动画
            currentPathIndex++;

            // 允许绘制下一个路径
            enableDrawingForNextPath();
        }, 100);
    }

    // 绘制当前路径
    function drawPath(path, pathDataPoints) {
        ctx.beginPath();
        const firstPoint = pathDataPoints[0];
        ctx.moveTo(firstPoint.x, firstPoint.y);

        pathDataPoints.forEach(point => {
            ctx.lineTo(point.x, point.y);
        });

        ctx.stroke();
    }

    startButton.addEventListener('click', startAnimation);
    </script>
</body>
</html>
